<template>
	<view class="pm100">

		<navigator class="mt140 cen" url="userinfo/index">
			<text class="jhnmkxertswrr pr">86km/h</text>
			<view class="pr">
				<image :src="res.avatar" class="usericonsdr cz" style="border-radius: 50%;"></image>
			</view>
			<view class="cf fz36 mt10">
				{{res.nickname}}
			</view>
		</navigator>

		<view class="mt60 cen pd row cf">
			<view class="col fz24">
				 <text class="fz40 ml10">0</text>
				 <text class="kkmmxeertw ml20">hr</text>
				 <view class="">
				 	行驶时间
				 </view>
			</view>
			<view class="col fz24">
				<text class="fz40 ml10">{{res.beans}}</text>
				<text class="kkmmxeertw ml20 ab">￥</text>
				<view class="">
					科豆
				</view>
			</view>
			<navigator class="col fz24" url="MyGrades">
				<text class="fz40 ml10">0</text>
				<text class="kkmmxeertw ml20 ac">K.lv</text>
				<view class="">
					我的等级
				</view>
			</navigator>

		</view>
		
		<view class="pd mt40 ">
			<navigator url="openVip" class="kjjnnmlser pt20 pl60 row ">
				<view class="col">
					<view class="fz320 cf">
						科尼德专属 <text class="ml20">VIP</text>
					</view>
					<view class="cf fz24 mt10">
						专享5大项功能
					</view>
				</view>
				
				
				<view class="dfdtyusewre">
					立即开通
				</view>
			</navigator>
			
		</view>
		
		<view class="mt40 pd">
			<view class="parent aa">
				<navigator class="kjhnderty yj4" url="MyAchievements">
					<view class="jjhdertt cen">
						<image src="../../static/img/dsdsfa.png" class="dfdstyywe cz" mode="widthFix"></image>
					</view>
					<view class="cf fz26 cen">成就</view>
					
				</navigator>
				<navigator class="kjhnderty yj4" url="wallet/index">
					<view class="jjhdertt cen">
						<image src="../../static/img/dsdsfb.png" class="dfdstyywe cz ab" mode="widthFix"></image>
					</view>
					<view class="cf fz26 cen">钱包</view>
					
				</navigator>
				<navigator class="kjhnderty yj4" url="CardVoucherPackage">
					<view class="jjhdertt cen">
						<image src="../../static/img/dsdsfc.png" class="dfdstyywe cz ac" mode="widthFix"></image>
					</view>
					<view class="cf fz26 cen">卡券</view>
				</navigator>
				
				
			</view>
			
		</view>
		
		
		<view class="mt40 pd">
			<view class="parent ab">
				<navigator class="kjhnderty yj4" url="TransportManagement/index">
					<view class="jjhdertt cen">
						<image src="../../static/img/dsfdfda.png" class="jhhdrettw cz" mode="widthFix" style="width: 96upx"></image>
					</view>
					<view class="cf fz26 cen">用车管理</view>
					
				</navigator>
				<navigator class="kjhnderty yj4" url="MyOrganization/index">
					<view class="jjhdertt cen">
						<image src="../../static/img/dsfdfdb.png" class="jhhdrettw cz" mode="widthFix" style="width: 68upx"></image>
					</view>
					<view class="cf fz26 cen">我的组织</view>
					
				</navigator>
				<navigator class="kjhnderty yj4" url="SafeLock/index">
					<view class="jjhdertt cen">
						<image src="../../static/img/dsfdfdc.png" class="jhhdrettw cz" mode="widthFix" style="width: 54upx"></image>
					</view>
					<view class="cf fz26 cen">安全锁</view>
					
				</navigator>
				<view class="kjhnderty yj4" >
					<view class="jjhdertt cen">
						<image src="../../static/img/dsfdfdd.png" class="jhhdrettw cz" mode="widthFix" style="width: 58upx"></image>
					</view>
					<view class="cf fz26 cen">邀请好友</view>
					
				</view>
				<view class="kjhnderty yj4" >
					<view class="jjhdertt cen">
						<image src="../../static/img/dsfdfde.png" class="jhhdrettw cz" mode="widthFix" style="width: 50upx"></image>
					</view>
					<view class="cf fz26 cen">使用指南</view>
					
				</view>
				<view class="kjhnderty yj4" >
					<view class="jjhdertt cen">
						<image src="../../static/img/dsfdfdf.png" class="jhhdrettw cz" mode="widthFix" style="width: 58upx"></image>
					</view>
					<view class="cf fz26 cen">在线咨询</view>
					
				</view>
				
			</view>
			
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				res:{}
			}
		},
		components: {

		},
		onNavigationBarButtonTap(e) {
			let th = this
			console.log(e.index)
			if (e.index == 0) {
				uni.navigateTo({
					url:'setting/index'
				})
			}  
			if (e.index ==1) {
				uni.navigateTo({
					url:'userinfo/index'
				})
			}
			if(e.index ==2){
				uni.scanCode({
					success: function (res) {
					}
				});
			}
		},
		methods: {
			async getuserinfo() {
				// let jhhsd = this.$store.state.userinfo
				// if (!jhhsd){
					let userinfo = await this.get('/api/user',{})
					this.res = userinfo.data
					this.$store.commit('setuserinfo', userinfo.data)
				// } else {
				// 	this.res = jhhsd					
				// }
				
			}
		},
		onShow() {
			let token = uni.getStorageSync('access_token')
			if (!token){
				uni.navigateTo({
					url:"/pages/user/LoginAndRegistration"
				})
			}
			this.getuserinfo()
			console.log("页面展示")
		},
		mounted() {			

		}
	}
</script>
<style scoped>
	.usericonsdr {
		width: 175upx;
		height: 175upx;
	}

	.parent {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 20upx;
		grid-row-gap: 20upx;
	}
	.parent.aa{
		grid-template-rows: repeat(1, 1fr);
	}
	.parent.ab{
		grid-template-columns: repeat(4, 1fr);
	}
	.kjhnderty{
		height: 200upx;
		background: #222735;
	}
	.parent.ab .kjhnderty{
		background:transparent !important;
	}
	.jhhdrettw{
		width: 64upx;
		height: 64upx;
	}
	.jjhdertt{
		line-height: 140upx;
	}
	.jhnmkxertswrr {
		font-size: 90upx;
		font-weight: 600;
		background: linear-gradient(to bottom, #434C60, #202435);
		-webkit-background-clip: text;
		color: transparent;
		position: absolute;
		left: 0;
		right: 0;
		top: -60upx;
		z-index: 1;
	}
	.kkmmxeertw{
		color:rgba(26,208,185,1);
		font-size: 36upx;
		font-style: oblique !important
	}
	.kkmmxeertw.ab{
		color: #FFD966;
	}
	.kkmmxeertw.ac{
		color: #FF4E5F;
	}
	.dfdstyywe{
		width: 80upx;
	}
	.dfdstyywe.ab{
		width: 66upx;
	}
	.dfdstyywe.ac{
		width: 70upx;
	}
	.kjjnnmlser{
		height:132upx;
		background:linear-gradient(86deg,rgba(27,213,185,1) 0%,rgba(22,137,213,1) 100%);
		opacity:1;
		border-radius:12upx;
	}
	.dfdtyusewre{
		width:166upx;
		height:56upx;
		line-height: 56upx;
		text-align: center;
		font-size: 24upx;
		background:rgba(255,255,255,1);
		opacity:1;
		color: #1689D5;
		border-radius:28upx;
		margin-right: 60upx;
		margin-top: 20upx;
	}
</style>
